<template>
    <div class="white-box">
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            row-key="sid"
            :header-cell-style="{
                background: '#F5F7FA',
                textAlign: 'center',
            }"
            :cell-style="
                ({ column }) => {
                    return {
                        textAlign:
                            column.className === 'operation-nav'
                                ? 'left'
                                : 'center',
                        paddingLeft:
                            column.className === 'operation-nav' ? '25px' : '0',
                    };
                }
            "
            border
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column
                prop="source_miniprogram"
                label="小程序"
                min-width="250"
                fixed="left"
            ></el-table-column>
            <el-table-column
                prop="source_miniprogram_appid"
                label="APPID"
                min-width="150"
            >
            </el-table-column>
            <el-table-column
                prop="user_version"
                label="版本号"
                min-width="100"
            ></el-table-column>
            <el-table-column
                prop="user_desc"
                label="版本描述"
                min-width="250"
            ></el-table-column>
            <el-table-column
                prop="create_time"
                label="创建时间"
                min-width="220"
            >
                <template #default="{ row }">
                    {{ formatDate(row.create_time) }}
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                width="200"
                class-name="operation-nav"
                fixed="right"
            >
                <template #default="{ row }">
                    <MoreBtn
                        :buttons="[
                            {
                                props: {
                                    onClick: () => onClickAdd(row.draft_id),
                                    'v-hasPermi': [
                                        'enttp:program:addToTemplate',
                                    ],
                                },
                                text: '添加至模板库',
                            },
                        ]"
                    />
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { inject, reactive, onMounted, onActivated, toRefs } from "vue";
import MoreBtn from "@/components/MoreBtn.vue";
import { getDrafts, addDraftToTemplate } from "@/apis/system/miniapp.js";
import { formatDate } from "@/assets/common/utils.js";

const $message = inject("$message");

const state = reactive({
    arr_data: [],
    loading: false,
});
const { arr_data, loading } = toRefs(state);

onActivated(() => {
    getList();
});

const getList = async () => {
    state.loading = true;
    const res = await getDrafts();
    if (res.data.code === 200) {
        state.arr_data = res.data.data.draft_list;
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
    state.loading = false;
};

const onClickAdd = async (draft_id) => {
    const res = await addDraftToTemplate({ draftId: draft_id });
    if (res.data.code === 200) {
        $message({ message: "添加成功", type: "success" });
        getList();
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};
</script>

<style lang="less" scoped></style>
